import router, { asyncRoutes, constantRoutes, resetRouter } from '@/router'
// constantRoutes: 无需动态判断权限的路由，如登录页、404等通用页面
// asyncRoutes: 代表那些需要动态判断权限并通过 addRoutes 动态添加的页面。也就是前端自己配置的路由
const page404 = () => import('@v/error-page/404.vue')
// console.log(asyncRoutes)

/**
 * 保留路由表中的子路由白名单，即没有设置menuId来进行权限控制的，返回这些子路由
 * setChild是把那些不需要权限控制的子路由加上去.
 * @param {Array} list
 */

function setChild(list) {
  if (!list) return []
  const children = []
  list.forEach(item => {
    if (!item?.meta?.menuId) { // 这里，就是将登录日志/系统日志这两个没有menuId的前端路由给加上去
      children.push(item)
    }
  })
  return children
}

/**
 * 统一后端返回的列表格式，因为admin登录后返回的权限菜单列表与其他账户的有所不同，所以加多一步转换
 * 其他的账户和admin登录后返回的权限路由表统一经过这个函数转换成数据结构
 * @param {Array} list 后端返回的路由表
 * @param {Int} parentId
 */

function changeList2Tree(list, parentId = '0') {
  // console.log(list)
  if (!list?.length) return []
  const tree = []
  list.forEach(item => {
    // if (item.menuType === 2) return // 去除按钮菜单 页面里的那些按钮
    if (item.parentId === parentId) { // parentId是要传进去做递归初始条件
      // console.log(item)
      tree.push({
        ...item, // 拷贝到当前对象之中
        children: item?.children?.length >= 1 ? item.children : changeList2Tree(item.children, item.parentId) // 最开始是changeList2Tree(list, item.id) 可能写错了
        // item && item.list && item.list.length >= 1
      })
    }
  })
  // console.log(tree)
  return tree
}
/**
 * 将前端路由表转换成list的形式，方便对比
 * @param { array} routeTree
 */
const whiteRouterList = ['/core', '/wuliu', '/goods'] // 子账号拥有的路由权限
function changeTree2List(routeTree) {
  // console.log(routeTree) // router里的modules所有的路由，即asyncRoutes
  let routeList = []
  const role = localStorage.getItem('role')
  routeTree.map(menu => {
    // console.log(menu)
    routeList.push({
      ...menu, // 拷贝到当前对象之中
      // hidden: !(role === 'yunying' || menu.path === '/core' || menu.path === '/wuliu' || menu.path === '/goods'),
      hidden: !(role === 'yunying' || whiteRouterList.includes(menu.path)),
      children: setChild(menu?.children)// 把那些不需要权限控制的子路由加上去
    })
    if (menu?.children?.length >= 1) {
      routeList = routeList.concat(changeTree2List(menu?.children))
    }
  })
  // console.log(routeList)
  return routeList
}

/** l
 * 对比后端权限路由表和前端路由表 生成用户可访问的菜单
 * @param {Array} menuList 后端权限路由表
 * @param {Array} routeList  前端路由表
 * menu 后端菜单
 * route 前端路由
 */
export function filterAsyncRoutes(menuList, routeList) {
  // routeList.pop()
  // console.log('menuList===', menuList) // 后端接口返回的路由
  // console.log('routeList===', routeList) // 前端配置的路由表总集合  这里用的是store文件夹里面的menu.js
  const res = [] // 最终要的路由表
  menuList.map(menu => {
    // console.log(menu)
    let hasRoute = false // 判断前端是否已经有创建对应的页面,默认是没有
    const { id, menuName, iconName } = menu
    // console.log(routeList)
    routeList.forEach((route) => {
      // console.log(route)
      if (id === route.meta.menuId) { // 判断后台
        hasRoute = true
        res.push({
          ...route,
          meta: {
            ...route.meta,
            title: menuName,
            icon: iconName
          },
          // 对...route复制下来的children进行覆盖
          children: [
            ...route.children, // 保留白名单子路由
            ...(menu?.children?.length >= 1) ? filterAsyncRoutes(menu.children, routeList) : [] // 递归生成其他权限子路由
          ]
        })
        // console.log(res)
      }
    })
    if (!hasRoute) { // 如果后端已有菜单，但前端尚未完成，则统一以404页面顶替
      res.push({
        path: menu.url.replace(/\.html/, ''),
        name,
        component: page404,
        meta: {
          title: menuName
        }
      })
    }
  })
  // console.log(res)
  return res
}

const state = {
  routes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    // state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, menuList) { // 这个menuList就是从入口文件permission里传过来的后端权限路由表
    // console.log('menuList===', menuList) // 后台路由 26个后台路由
    return new Promise(resolve => {
    // 过滤出asyncRoutes meta下面没有menuId的路由  这个项目是没有的所以写了也没啥用  但是可以先加着
    //   const a = asyncRoutes.filter(route => {
    //     return !route?.meta?.menuId && route?.meta?.menuId !== 0
    //   })
    //   console.log(a) // []
      //   console.log(asyncRoutes) // router里的modules所有的一二三级路由
      const accessdRoutes = filterAsyncRoutes(changeList2Tree(menuList), changeTree2List(asyncRoutes)) // filterAsyncRoutes返回的res
      //   console.log(changeTree2List(asyncRoutes))
      // console.log(accessdRoutes)
      // accessdRoutes = accessdRoutes.concat(a)
      accessdRoutes.sort((a, b) => { return a.sort ? (a.sort - b.sort) : -1 }) // 按照sort排序
      resetRouter()
      if (accessdRoutes) {
        // console.log(accessdRoutes)
        router.addRoutes(accessdRoutes) // 挂载路由  动态添加可访问路由表
        // console.log(router)
      } else {
        router.addRoutes([ // 如果路由没有挂载成功，则跳转到404页面
          { path: '*', redirect: '/404' }
        ])
      }
      commit('SET_ROUTES', accessdRoutes)
      resolve(accessdRoutes)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
